<template>
  <div id="div">
    <!-- 设置一个大盒子 存放全部内容 设置背景图 -->
    <div id='div-1'>
      <!-- 内容的父级 居中 宽度为90% 可以自己调整 -->
       <h1 class="kh1">XXX后台管理系统</h1>
       <!-- 文字居中 设置大小 -->
       <div id="main">
         <!-- 侧边图 -->
         <div id="main-img">
         </div>
         <div id="btn">
           <!-- 选项 共三个 不是动态生成 -->
           <div id="btn1top">
             <!-- 目前无法实现点击切换背景颜色 ,现在能了 -->
              <div class="btn-1" @click="fn1(0)">
                <!-- 点击触发fn函数并且传参,修改当前背景颜色,和this.num的值 -->
                <i class="el-icon-user-solid"></i>
                <p>
                  登录
                </p>
              </div>
              <div class="btn-1" @click="fn2(1)">
                <!-- 与第一个作用一样 -->
                <i class="el-icon-s-tools"></i>
                <p>
                  注册
                </p> 
              </div>
              <div class="btn-1" @click="fn3(2)">
                <!-- 与第二个第一个作用一样 -->
                <i class="el-icon-s-home"></i>
                <p>
                  忘记密码?
                </p>
              </div>
           </div>
           <div id="btn2bot">
              <Son1 v-if="num===0"></Son1>
              <Son2 v-else-if="num === 1"></Son2>
              <Son3 v-else-if="num === 2"></Son3>
              <!-- 这三个是判断条件,触发时显示页面 -->
           </div>
           <div class="clear"></div>
           <!-- 清除浮动 -->
         </div>
       </div>
    </div>
    <!-- 最底下的话 -->
        <p id="bottom">
          Copyright © 2019 - nowYear}} 版权所有| by ChanKwongwing
        </p>
  </div>
</template>

<script>
let btn1 = document.getElementsByClassName("btn-1");
import Son1 from "./Son1.vue"
import Son2 from "./Son2.vue"
import Son3 from "./Son3.vue"
export default {
  data(){
    return{
      num:0
    }
  },
  methods:{
    fn1(va){
      btn1[va].style=" background: rgb(0,173,69);"
      btn1[1].style=" background: white;"
      btn1[2].style=" background: white;"
      this.num=0
    },
    fn2(va){
      btn1[va].style=" background: rgb(0,173,69);"
      btn1[0].style=" background: white;"
      btn1[2].style=" background: white;"
      this.num=1
    },
    fn3(va){
      btn1[va].style=" background: rgb(0,173,69);"
      btn1[1].style=" background: white;"
      btn1[0].style=" background: white;"
      this.num=2
    }
  },
  components:{Son1,Son2,Son3}
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.clear {
  clear: both;
}
#div {
  min-height: 753px;
  background-image:url(https://picsum.photos/1920/1080);
  position: relative;
}
#div-1 {
  width: 80%;
  margin: auto;
}
.kh1 {
  color: white;
  text-align: center;
  padding-top:40px;
  font-size: 40px;
}
#main {
  width: 90%;
  margin: auto;
  margin-top:76px ;
}
#main-img {
  background: url(./m.jpg) ;
  float: left;
  width: 25%;
  height: 303px;
}
#btn1top {
  width: 20%;
  float: left;
  background: #fff;
  height: 303px;
}
#btn .btn-1{
    height: 11%;
    width: 100%;
    border-right: 1px solid #dcdcdc;
    font-size: 17px;
    padding: 34px 0;
    z-index: 100;
    color: #111;
    text-align: center;
    display:block;
}

#btn2bot {
  float:right;
  width: 55%;
}

#bottom {
  width: 100%;
  text-align: center;
  font-size: 15px;
  color: white;
  position: absolute;
  bottom: 5px;
}


</style>